<template>
	<view class="container">
		<view class="h">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color">
				<view class="u-m-r-10 u-flex-1">
					<view class="header-text"> {{year}} {{year_str}}</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view class="header-text">{{income_str}}</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view class="header-text"> {{expenditure_str}}</view>
				</view>
			</view>
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 bg-color">
				<view class="u-m-r-10 u-flex-1">
					<view class="header-content">
						<view class="header-children" @click="clickDate">
							<view class="header-children header-content-2x">{{month}}</view>
							<view class="header-children">{{month_str}}</view>
							<view class="header-children">
								<u-icon class="header-children header-icon" name="arrow-down-fill" color="#323232" size="30"></u-icon>
							</view>
						</view>
						
						<view class="header-children" style="margin: 0;
						padding-left: 50rpx;
						border-right-width: 1px;
						border-right-style: solid;
						height: 50rpx;
						transform: scaleX(0.5);
						border-color: #0c0c0c;">
							
						</view>
					</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view>
						<view class="header-children header-content-2x"> {{income_int}} </view>
						<view class="header-children"> .{{income_decimal}} </view>
					</view>
				</view>
				<view class="u-m-r-10 u-flex-1">
					<view>
						<view class="header-children header-content-2x"> {{expenditure_int}} </view>
						<view class="header-children"> .{{expenditure_decimal}} </view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="list.length > 0">
			<scroll-view
			scroll-y="true" 
			:style="{height:scroll_view_height+'px'}" 
			refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresher()"
			@refresherrestore="refresherrestore()"
		    @refresherabort="refresherabort()">
				<view>
					<view v-for="(item, index) in list" :key="index">
						<view class="u-flex list-box">
							<view class="u-m-r-10 u-flex-1">
								<view class="header-text"> {{item.time}} {{item.week}}</view>
							</view>
							<view class="u-m-r-10 u-flex-1">
								<view class="header-text">{{income_str}} {{item.income}}</view>
							</view>
							<view class="u-m-r-10 u-flex-1">
								<view class="header-text">{{expenditure_str}} {{item.expenditure}}</view>
							</view>
						</view>
						
						<view class="list-box-children" v-for="(item1, index1) in item.list" :key="index1" @click="toDetail(item1)">
							<view class="u-flex">
								<image slot="icon" class="box-icon" :src="item1.icon" mode="" :lazy-load="lazy_load"></image>
							</view>
							<view class="box-left">
								{{item1.bill_type}}
							</view>
							<view class="box-desc">
								{{item1.desc}}
							</view>
							<view class="u-flex-1 box-right">
								{{item1.bill_money}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="is_show_emoty" :style="{height:scroll_view_height+'px'}">
			<u-empty text="暂无明细" mode="list"></u-empty>
		</view>
		
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
		
	</view>
</template>


<script setup>
import { ref } from "vue";
import { wxlogin } from './index.js'

const picker_params = ref({
	year: true,
	month: true,
	day: false,
	hour: false,
	minute: false,
	second: false
})

const picker_show = ref(false)
const picker_time = ref("")

const phone_height = ref("0")
const scroll_view_height = ref("0")  // default:546

const refresherTriggered = ref(false)
const _refresherTriggered = ref(false)

const year_str = ref("年")
const month_str = ref("月")
const income_str = ref("收入")
const expenditure_str = ref("支出")

const year = ref("")
const month = ref("")

const income_sum = ref("0.00")
const income_int = ref("0")
const income_decimal = ref("00")

const expenditure_sum = ref("0.00")
const expenditure_int = ref("0")
const expenditure_decimal = ref("00")

const list = ref([
	{expenditure: "34.00",
	income: "0.00",
	list: [
		{	bill_id: 1,
			bill_money: "-34.00",
			bill_type: "衣服",
			desc: "",
			icon: "../../static/type/1.png",
			id: 1,
			img_url: "",
			time: "03-05",
		}
	],
	time: "03月05日",
	week: "星期五",
	}
])

const reload = ref(false)

const is_show_emoty = ref(false)
const lazy_load = ref(true)
	
uni.getSystemInfo({
	success(res) {
		phone_height.value = res.windowHeight
		let v = uni.createSelectorQuery().select(".h");
		v.boundingClientRect(data=>{
			scroll_view_height.value = phone_height.value - data.height;
		}).exec();
	}
})

function clickDate(){
	picker_show.value = true;
}
function pickerConfirm(e) {
	if (picker_params.value.year) year.value = e.year;
	if (picker_params.value.month) month.value = e.month;
	
	picker_time.value = year.value + "-" + month.value;
}
function refresher(){
	console.log('下拉刷新');
	if(_refresherTriggered.value){
		return;
	}
	_refresherTriggered.value = true;
	if(!_refresherTriggered.value){
		refresherTriggered.value = true;
	}
}
function refresherrestore(){
	console.log("自定义下拉刷新被复位");
	refresherTriggered.value = false;
	_refresherTriggered.value = false;
}
function refresherabort(){
	console.log("自定义下拉刷新被中止");
	refresherTriggered.value = false;
	_refresherTriggered.value = false;
}
function formatSum(){
	let income_sum_arr = income_sum.value.split('.');
	income_int.value = income_sum_arr[0];
	income_decimal.value = income_sum_arr[1];
	
	let expenditure_sum_arr = expenditure_sum.value.split('.');
	expenditure_int.value = expenditure_sum_arr[0];
	expenditure_decimal.value = expenditure_sum_arr[1];
}
function toDetail(e){
	console.log(e);
	
	uni.navigateTo({
		url: '/pages/index/detail'
	});
	
	uni.$once('newPageOpen', (data) => {
		console.log("接收事件newPageOpen成功,data=", data);
		uni.$emit('detailData',e);
		console.log('向新页面触发detailData数据',e);
	});
}


let t = new Date().toISOString().slice(0, 10);
let t_a = t.split("-");
year.value = t_a[0] || "";
month.value = t_a[1] || "";
picker_time.value = year.value + "-" + month.value



//封装微信获取用户code，避免嵌套
 function login() {
	return new Promise((resolve, reject) => {
		uni.login({
			success(res) {
				resolve(res);
			},
			fail(err) {
				reject(err);
			}
		});
	});
}

function init() {
	uni.getStorage({
		key: "userInfo",
		success: function (res) {
			if (res.errMsg !== "getStorage:ok" || !res.data.openid) {
				setOpenId(res.data)
			}
		},
		fail: function () {
			debugger
			setOpenId()
		}
	})
    
}

async function setOpenId (userInfo) {
	//调用微信登陆
	let res1 = await login()
	if (res1.code && ['login:ok'].includes(res1.errMsg)) {
	    //后端通过code调用微信API返回openid/unionid/session_key参数， 存储起来,前端无法直接调用微信相关API
	    let openIdRes = await wxlogin(res1.code)
		debugger
		if(userInfo) {
			userInfo.openid = openIdRes.data.openid
			userInfo.sessionKey = openIdRes.data.sessionKey
		} else {
			userInfo = {
				openid: openIdRes.data.openid,
				sessionKey: openIdRes.data.sessionKey
			}
		}
		uni.setStorage({
			key: "userInfo",
			data: userInfo
		})
	} 
}


init()


</script>


<style lang="scss" scoped>
 .container{
 	background-color: #f7f7f7;
 	
 	.bg-color{
 		background-color: #FDDC2D
 	}
 	.header-text{
 		font-size: 25rpx;
 		color: #7a7a7a;
 	}
 	.header-children{
 		display: initial;
 	}
 	.header-content-2x{
 		font-size: 40rpx;
 	}
 	.header-icon{
 		padding: 15rpx;
 	}
 	
 	.list-box{
 		padding: 18rpx 18rpx 18rpx 40rpx;
 	}
 	.list-box-children{
 		display: -webkit-box;
 		display: -webkit-flex;
 		display: flex;
 		-webkit-box-orient: horizontal;
 		-webkit-box-direction: normal;
 		-webkit-flex-direction: row;
 		flex-direction: row;
 		-webkit-box-align: center;
 		-webkit-align-items: center;
 		align-items: center;
 		position: relative;
 		box-sizing: border-box;
 		width: 100%;
 		padding: 26rpx 32rpx;
 		font-size: 28rpx;
 		line-height: 50rpx;
 		color: #606266;
 		background-color: #fff;
 		text-align: left;
 		
 		.box-icon{
 			width: 50rpx;
 			height: 50rpx;
 			margin-right: 35rpx;
 		}
 		
 		.box-left{
 			width: auto;
 			font-weight: 500;
 			font-size: 28rpx;
 		}
 		
 		.box-right{
 			overflow: hidden;
 			text-align: right;
 			vertical-align: middle;
 			color: #909399;
 			font-size: 26rpx;
 		}
 		
 		.box-desc{
 			font-weight: 500;
 			width: 300rpx;
 			margin-left: 50rpx;
 			overflow: hidden;
 			text-overflow: ellipsis;
 			-ms-text-overflow: ellipsis;
 			display: -webkit-box;
 			line-clamp: 1;
 			-webkit-line-clamp: 1;
 			-webkit-box-orient: vertical;
 		}
 	}
 }
 
 .u-cell-icon {
 	width: 36rpx;
 	height: 36rpx;
 	margin-right: 8rpx;
 }
</style>
